<template>
  <page-frame>
    <div class="inAndOutRegistration">
      <div class="toptitle">
        <div class="left">出入登记</div>
        <div class="right">
          <div class="btns">
            <el-button @click="newRegistration" class="lightGreenBtn">新增登记</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-main">
        <div class="input">
          <el-row>
            <el-col style="width: 130px;">
              <div class="input-item">
                <el-select style="width:90%!important;" v-model="queryData.fileId" @change="selectItem" @clear = "clearItem" clearable placeholder="请选择项目">
                  <el-option
                    v-for="item in fileList"
                    :label="item.fileName"
                    :value="item.fileId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="input-item"   v-show="queryData.fileId=='1'">
                <el-date-picker v-model="queryData.createTime" @change="loadTableData" placeholder="请选择申请外出时间" type="date">
                </el-date-picker>
              </div>
              <div class="input-item"   v-show="queryData.fileId=='2'">
                <el-date-picker v-model="queryData.eBackTime" @change="loadTableData" placeholder="请输入预计返院日期" type="date">
                </el-date-picker>
              </div>
              <div class="input-item"   v-show="queryData.fileId=='3'">
                <el-input v-model="queryData.memberName" @keyup.enter.native="loadTableData" placeholder="请输入会员姓名">
                </el-input>
              </div>
            </el-col>
            <el-col :span="2" :offset="0">
              <div class="btns" style=" width:70%;">
                <el-button class="query lightGreenBtn" @click="loadTableData">搜索</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="tabs">
          <el-table
            :data="tableData"
            border
            highlight-current-row
            @cell-dblclick="detailSheet"
            style="width: 100%">
            <el-table-column
              prop="createTimeV"
              label="申请外出时间"
            >
            </el-table-column>
            <el-table-column
              prop="eBackTimeV"
              label="预计返院日期"
            >
            </el-table-column>
            <el-table-column
              prop="memberNo"
              label="会员编号"
            >
            </el-table-column>
            <el-table-column
              prop="memberName"
              label="会员姓名"
            >
            </el-table-column>
            <el-table-column
              prop="reason"
              label="外出原因"
            >
            </el-table-column>
            <el-table-column
              prop="escort"
              label="陪同家属"
            >
            </el-table-column>
            <el-table-column
              prop="sibPhone"
              label="家属联系方式"
            >
            </el-table-column>
            <el-table-column
              prop="operating"
              label="操作"
              width=""
            >
              <template scope="scope">
                <el-button v-show="scope.row.backTime==''"  type="text" size="small" @click.stop="inSheet(scope.row)">返院</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--返院登记-->
          <el-dialog title="返院登记" v-model="back" size="tiny" :close-on-click-modal="false">
            <el-form label-position="right" label-width="85px" :model="backData">
              <el-form-item label="申请离院时间"  class="formItem">
                <el-input v-model="backData.currentMemCreateTime" disabled></el-input>
              </el-form-item>
              <el-form-item label="实际返院时间"  class="formItem">
                <el-date-picker
                  v-model="backData.backTime"
                  type="date"
                  placeholder="选择实际返院时间"
                  align="right">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="家属姓名">
                <el-input v-model="backData.currentMemeEscort" disabled></el-input>
              </el-form-item>
              <el-form-item label="家属电话">
                <el-input v-model="backData.currentMemSibPhone" disabled></el-input>
              </el-form-item>
              <!--<el-form-item label="确认返院">-->
                <!--<el-switch on-text="是" off-text="否" v-model="backData.isUrgent"></el-switch>-->
              <!--</el-form-item>-->
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="back = false">取 消</el-button>
              <el-button type="primary" @click="confirmContacts">确 定</el-button>
            </span>
          </el-dialog>

          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangePage"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script >
  import outRegistrationApi from '../../service/serCenter/outRegistrationApi'
  import common from '../../config/common'
  export default {
    data () {
      return {
        back:false,
        queryData:{
          fileId:1,
          createTime: "",
          eBackTime: "",
          memberName: "",
          reason: ""
        },
        fileList:[{
          fileId: 1,
          fileName: "外出时间"
        },{
          fileId: 2,
          fileName: "预计返院日期",
        },{
          fileId: 3,
          fileName: "会员姓名",
        }],
        tableData: [],
        backData: {
          "backTime": "",
          "entryId": 0,
          "isUrgent":true,
          "currentMemCreateTime":"",
          "currentMemSibPhone":"",
          "currentMemeEscort":"",
        },
        total:0,
        currentPage:1,
      }
    },
    methods: {
      init(){
        this.loadTableData();
      },
      /**
       * 查询表格
       */
      loadTableData(){
        let self = this;
        if(self.queryData.eBackTime!=""){
          self.queryData.eBackTime = common.formatDate(self.queryData.eBackTime);
          self.queryData.eBackTime = self.queryData.eBackTime.replace(/-/g, ' ');
        };
        if(self.queryData.createTime!=""){
          self.queryData.createTime = common.formatDate(self.queryData.createTime);
          self.queryData.createTime = self.queryData.createTime.replace(/-/g, ' ');
        };
        outRegistrationApi.getTableData(10,self.currentPage,self.queryData).then(function(response){
          self.tableData = response.body.data.list;
          for(var i=0;i<self.tableData.length;i++){
            var memberRow = self.tableData[i];
             memberRow.createTimeV =memberRow.createTime.substring(0,10);
             memberRow.eBackTimeV =memberRow.eBackTime.substring(0,10);
          };
//          if(!response.data.data.total){
//            self.total = 1;
//          }else{
            self.total = response.body.data.total;
//          }
        },function () {})
      },
      /**
       * 新增登记
       */
      newRegistration(){
        this.$router.push({name: 'inAndOutNewRegistration',params:{entryId:0}});
      },
      /**
       * 改变项目名称时清空queryData中的数据
       */
      selectItem(){
        this.queryData.createTime="";
        this.queryData.eBackTime="";
        this.queryData.memberName="";
        this.queryData.reason="";
      },
      /**
       * 清空按钮触发
       */
      clearItem(){
        this.selectItem();
      },
      /**
       * 详情
       */
      detailSheet(val){
        this.$router.push({name: 'inAndOutNewRegistration',params:{entryId:val.entryId}});
      },
      /**
       * 归院
       */
      inSheet(val){
        this.back = true;
        this.backData.currentMemCreateTime = val.createTime;
        this.backData.currentMemeEscort = val.escort;
        this.backData.currentMemSibPhone = val.sibPhone;
        this.backData.entryId = val.entryId;
      },

      /**
       * 确认返院
       */
      confirmContacts(){
        let self = this;
        self.backData.backTime = common.formatDate( self.backData.backTime);
        outRegistrationApi.entryBack(self.backData).then(function (response) {
          self.loadTableData();
          self.$message({
            message: '返院登记成功',
            type: 'success'
          });
          self.back = false;
        },function () {
          self.$message({
            message: '返院登记失败',
            type: 'warning'
          });
        })
      },
      handleSizeChange(){},
      handleCurrentChangePage(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.loadTableData();
      },
    },
    mounted: function () {
      this.init();
    },

  }
</script>
<style>

  .inAndOutRegistration .input .btns{
    margin-top:0;
  }
  .inAndOutRegistration .el-input{
    width: 80%;
  }
  .inAndOutRegistration .input input{
    display: inline-block;
  }
  .inAndOutRegistration .scroll{
    height: calc(100vh - 122px);
    padding:0px 50px;
  }
  .inAndOutRegistration .el-pagination{
    margin-right:0!important;
    padding-right:0!important;
  }
  .inAndOutRegistration .el-select {
    display: block;
    position: relative;
  }
</style>
